<template>
  <ul>
    <li v-for="todo in todos">
      <input type="checkbox" :checked="todo.done" @change="toggle(todo)" />
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
    </li>
    <li>
      <input placeholder="What needs to be done?" @keyup.enter="addTodo" />
    </li>
    <li>
      <span>count:{{count}}</span>
      <el-button @click="addCount">点我增加</el-button>
    </li>

    <li>
      <span>counter:{{counter}}</span>
      <el-button @click="addCounter">点我增加</el-button>
    </li>
  </ul>
</template>

<script>
  import { mapMutations } from 'vuex'

  export default {
    computed: {
      todos() {
        return this.$store.state.todos.list
      },
      count() {
        return this.$store.state.addCount.count
      },
      counter() {
        return this.$store.state.counter
      }
    },
    methods: {
      addTodo(e) {
        this.$store.commit('todos/add', e.target.value)
        e.target.value = ''
      },
      addCount() {
        this.$store.commit('addCount/add')
      },
      addCounter() {
        this.$store.commit('increment')
      },
      ...mapMutations({
        toggle: 'todos/toggle'
      })
    }
  }
</script>

<style>
  .done {
    text-decoration: line-through;
  }
</style>
